<template>
  <!-- 商品管理 -->
  <div class="goods-manager">
    <!-- 操控区
       @click="$router.push('/home/xinzeng')"
     -->
    <div class="handler-box">
      <el-button
        type="success"
        icon="el-icon-plus"
        size="medium"
        @click="updateGoods()"
      >
        新增商品
      </el-button>
    </div>

    <!-- 表格区 -->
    <!-- memberData -->
    <!--tableData  -->
    <el-table :data="memberData" stripe @selection-change="changeSelects">
      <el-table-column
        type="selection"
        min-width="5%"
        align="center"
      ></el-table-column>

      <el-table-column
        label="商品编号"
        prop="goodsId"
        min-width="15%"
      ></el-table-column>

      <el-table-column
        label="商品名"
        prop="goodsName"
        min-width="15%"
        align="center"
      ></el-table-column>

      <el-table-column
        label="商品简介"
        prop="goodsIntro"
        min-width="15%"
        align="center"
      ></el-table-column>
      <!-- 商品图片 -->
      <el-table-column label="商品图片" min-width="35%" align="center">
               
        <template v-slot="{ row }">
                   
          <el-image
            :src="row.goodsCoverImg"
            :preview-src-list="[row.goodsCoverImg]"
          >
                     
          </el-image>
                 
        </template>
             
      </el-table-column>

      <el-table-column
        label="商品库存"
        prop="stockNum"
        min-width="15%"
        align="center"
      ></el-table-column>

      <el-table-column
        label="商品售价"
        prop="sellingPrice"
        min-width="15%"
        align="center"
      ></el-table-column>

      <el-table-column
        label="上架状态"
        prop="goodsSellStatus"
        min-width="15%"
        align="center"
      >
        <!--  <template #default="{ row }">
          <el-link type="success" v-if="row.goodsSellStatus == 0"
            >销售中</el-link
          >
          <el-link type="danger" v-if="row.goodsSellStatus == 1">已下架</el-link
          >         
        </template> -->
      </el-table-column>

      <el-table-column label="操作" min-width="15%" align="center">
        <template #default="{ row }">
          <el-link type="success" @click="updateGoods(row.goodsId, row)"
            >修改</el-link
          >
          <el-link
            type="primary"
            slot="reference"
            @click="openDialog(row.goodsSellStatus, row.goodsId)"
            >{{ row.goodsSellStatus == "已下架" ? "上架" : "下架" }}</el-link
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页区 -->
    <el-pagination
      background
      layout="prev, pager, next"
      :hide-on-single-page="true"
      :total="total"
      :page-size="pageSize"
      :current-page="page"
      @current-change="paginationChange"
      @prev-click="paginationChange"
      @next-click="paginationChange"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: "goods-manager",
  data() {
    return {
      shangjia: [],
      tableData: [],
      pageSize: 10,
      total: 0,
      page: 1,
    };
  },
  methods: {
    //发送数据请求
    async query() {
      console.log("执行");
      try {
        let { resultCode, data } = await this.$api.GoodsManager.goods(
          this.page,
          this.pageSize
        );
        console.log(+resultCode, "1212");
        if (+resultCode !== 200) {
          this.tableData = [];
          this.loading = false;
          return;
        }
        let { totalCount, list } = data;
        this.tableData = Object.freeze(list);
        console.log(this.tableData, "11");
        this.total = totalCount;
      } catch (_) {
        this.tableData = [];
        this.total = 0;
      }
    },

    changeSelects() {},
    //分页
    paginationChange(val) {
      this.page = +val;
      this.query();
    },
    //上架，下架
    async openDialog(goodsSellStatus, goodsId) {
      if (goodsSellStatus === "已下架") {
        let { resultCode } = await this.$api.GoodsManager.goodsRemove(goodsId);

        if (+resultCode !== 200) {
          return;
        }
      }
      if (goodsSellStatus === "销售中") {
        let { resultCode } = await this.$api.GoodsManager.goodsInfo(goodsId);
        if (+resultCode !== 200) {
          return;
        }
      }

      this.query();
    },
    //修改
    updateGoods(id) {
      if (id) {
        this.$router.push({
          path: "xinzeng",
          name: "xinzeng",
          query: {
            id,
          },
        });
        return;
      }
      this.$router.push({
        path: "xinzeng",
        name: "xinzeng",
      });
    },
  },
  computed: {
    memberData() {
      return this.tableData.map((item) => {
        item.goodsSellStatus = item.goodsSellStatus === 0 ? "销售中" : "已下架";
        /*  item.isDeleted = item.isDeleted === 0 ? "正常" : "禁用"; */
        return item;
      });
    },
  },
  created() {
    this.query();
  },
};
</script>

<style lang="less" scoped>
/deep/.el-link--inner {
  margin-right: 10px;
}
</style>